<template>
  <div class="box">
    {{ 1 + 1 }}
  </div>
  <div class="box1-wrap">
    <div class="box1" v-for="(item, index) in columns">
      <div class="box1-inner" :style="item.style.value">
        <div class="box1-item" v-for="(item, index) in item.list" :key="index">{{ index + 1 }}</div>
        <div class="box1-item" v-for="(item, index) in item.list" :key="index">{{ index + 1 }}</div>
      </div>
    </div>
  </div>
  <div class="box2" :style="style">
    {{ 1 + 1 }}
  </div>
  <button @click="add">添加</button>
  <button @click="add2">添加2</button>
</template>
<script>
import { gsap } from '../../libs/gsap-3.11.1.min.js'
import { ref, markRaw } from 'vue'
export default {
  data() {
    return {
      style: {},
      columns: []
    }
  },
  methods: {
    add() {
      this.columns.forEach((res) => res.start())
    },
    add2() {
      let obj = {
        x: 0
      }
      gsap.to(obj, 10, {
        x: 100,
        ease: SteppedEase.config(10),
        onUpdate: () => {
          this.style = {
            transform: `translatex(${obj.x}px)`
          }
        }
      })
    }
  },
  mounted() {
    console.log(`helloworld`)
    let s = [2, 1, 1, 1]
    let e = [2, 3, 4, 9]
    let run = 4
    let obj = {
      x: 0
    }

    let columns
    columns = s.map((res, index) => {
      let obj = {
        s: res,
        list: new Array(10).fill(1).map((res, index) => index + 1),
        e: e[index],
        style: ref({}),
        x: 0,
        turn: 1,
        time: 3,
        init() {
          let y_start = (obj.s - 1) * -20
          this.style.value = {
            transform: `translatey(${y_start}px)`
          }
        },
        start() {
          gsap.to(obj, obj.time, {
            x: 1,
            delay: 2 * index,
            onUpdate: () => {
              //这里一开始不是0
              //起始状态
              let y_start = (obj.s - 1) * -20
              //结束状态
              let y_end = (obj.e - 1) * -20 + obj.turn * -200
              //差值
              let diff = y_end - y_start
              //进度
              let ny = (y_start + diff * obj.x) % 200

              let style = {
                transform: `translatey(${ny}px)`
              }
              obj.style.value = style
              console.log(style)
            }
          })
        }
      }
      obj.init()
      return markRaw(obj)
    })
    this.columns = columns
  }
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  transform: translate(100px, 0) scale(-1, 1) translate(-100px, 0);
}
.box2 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
.box1 {
  width: 20px;
  height: 20px;
  overflow: hidden;
  &-wrap {
    display: flex;
  }
  &-inner {
    display: flex;
    flex-direction: column;
  }
  &-item {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    text-align: center;
    line-height: 20px;
    box-sizing: border-box;
  }
}
</style>
